﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Initialize Spread</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
        /*css_begin*/
        input[type="text"],
        select {
            width: 90px;
        }

        div.row {
            margin-bottom: 6px;
        }

        div.group {
            display: inline-block;
            width: 240px;
        }

        .container label {
            display: inline-block;
            width: 140px;
            text-align: right;
        }

        .sample-turtorial, .container {
            font-family: 'Times New Roman';
        }
        /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 1 });
            initSpread(spread);

            $("#btnSetPrintInfo").click(function () {
                function setPrintInfoNumberValueItem(printInfo, key, method) {
                    var value = parseInt($("#" + key).val()),
                        method = method || key;

                    if (!isNaN(value)) {
                        printInfo[method](value);
                    }
                }

                var sheet = spread.getActiveSheet(),
                    printInfo = sheet.printInfo();

                ["rowStart", "rowEnd", "columnStart", "columnEnd",
                    "repeatRowStart", "repeatRowEnd", "repeatColumnStart", "repeatColumnEnd"
                ].forEach(function (name) {
                    setPrintInfoNumberValueItem(printInfo, name);
                });

                printInfo.showBorder($("#showBorder").prop("checked"));
                printInfo.showGridLine($("#showGridLine").prop("checked"));
                printInfo.showRowHeader(+$("#showRowHeader").val());
                printInfo.showColumnHeader(+$("#showColumnHeader").val());
                printInfo.headerLeft($("#headerLeft").val());
                printInfo.headerLeftImage($("#headerLeftImage").val());
                printInfo.headerCenter($("#headerCenter").val());
                printInfo.headerCenterImage($("#headerCenterImage").val());
                printInfo.headerRight($("#headerRight").val());
                printInfo.headerRightImage($("#headerRightImage").val());
                printInfo.footerLeft($("#footerLeft").val());
                printInfo.footerLeftImage($("#footerLeftImage").val());
                printInfo.footerCenter($("#footerCenter").val());
                printInfo.footerCenterImage($("#footerCenterImage").val());
                printInfo.footerRight($("#footerRight").val());
                printInfo.footerRightImage($("#footerRightImage").val());
            });

            $("#btnPrint").click(function () {
                spread.print();
            });
        });

        function adjustLayoutForPrint(sheet) {
            sheet.setRowHeight(0, 30);
            sheet.getCells(0, 0, 0, 4).hAlign(1).vAlign(1).font("bold 14px Arial");
            sheet.setColumnWidth(0, 220);
            sheet.setColumnWidth(2, 120);
            sheet.setColumnWidth(3, 50);
            sheet.setColumnWidth(4, 180);

            sheet.getCells(1, 0, 200, 4).textIndent(1);
            sheet.getColumn(3).hAlign(1).textIndent(0);

            sheet.addColumns(0, 1);
            sheet.setColumnWidth(0, 30);
            for (var r = 5; r <= 200; r += 5) {
                sheet.getCell(r, 0)
                    .text(r + "")
                    .font("normal 9px Arial");
            }

            sheet.addRows(0, 1);
            sheet.setRowHeight(0, 10);

            sheet.setBorder(new GcSpread.Sheets.Range(1, 1, 202, 5),
                new GcSpread.Sheets.LineBorder("black", GcSpread.Sheets.LineStyle.thin),
                { all: true });
        }

        function setPrintInfo(sheet) {
            var printInfo = sheet.printInfo();

            // custom printInfo for default output
            printInfo.showBorder(false);
            printInfo.showGridLine(false);
            printInfo.columnEnd(5);
            printInfo.repeatRowStart(0);
            printInfo.repeatRowEnd(1);
            printInfo.showColumnHeader(GcSpread.Sheets.PrintVisibilityType.Hide);
            printInfo.showRowHeader(GcSpread.Sheets.PrintVisibilityType.Hide);
            printInfo.headerCenter("Olympic Athletes");
            printInfo.headerLeft("&G");
            printInfo.headerLeftImage("images/olympic.jpg");
            printInfo.footerCenter("&P/&N");

            // sync with UI setting items
            $("#rowStart").val(printInfo.rowStart());
            $("#rowEnd").val(printInfo.rowEnd());
            $("#columnStart").val(printInfo.columnStart());
            $("#columnEnd").val(printInfo.columnEnd());
            $("#repeatRowStart").val(printInfo.repeatRowStart());
            $("#repeatRowEnd").val(printInfo.repeatRowEnd());
            $("#repeatColumnStart").val(printInfo.repeatColumnStart());
            $("#repeatColumnEnd").val(printInfo.repeatColumnEnd());
            $("#showBorder").prop("checked", printInfo.showBorder());
            $("#showGridLine").prop("checked", printInfo.showGridLine());
            $("#showRowHeader").val(printInfo.showRowHeader());
            $("#showColumnHeader").val(printInfo.showColumnHeader());
            $("#headerLeft").val(printInfo.headerLeft());
            $("#headerLeftImage").val(printInfo.headerLeftImage());
            $("#headerCenter").val(printInfo.headerCenter());
            $("#headerCenterImage").val(printInfo.headerCenterImage());
            $("#headerRight").val(printInfo.headerRight());
            $("#headerRightImage").val(printInfo.headerRightImage());
            $("#footerLeft").val(printInfo.footerLeft());
            $("#footerLeftImage").val(printInfo.footerLeftImage());
            $("#footerCenter").val(printInfo.footerCenter());
            $("#footerCenterImage").val(printInfo.footerCenterImage());
            $("#footerRight").val(printInfo.footerRight());
            $("#footerRightImage").val(printInfo.footerRightImage());
        }

        function initSpread(spread) {
            $.ajax({
                url: "OlympicAthletes_json.txt",
                datatype: "text",
                beforeSend: function (xhr) {
                },
                success: function (data) {
                    try {
                        var sd = JSON.parse(data);
                        if (sd && sd.sheets) {
                            if (!spread) {
                                return;
                            }
                            spread.isPaintSuspended(true);

                            spread.fromJSON(sd);

                            var sheet = spread.sheets[0];

                            adjustLayoutForPrint(sheet);

                            setPrintInfo(sheet);

                            spread.isPaintSuspended(false);
                        }
                    } catch (ex) {
                        alert("init spread with exception: " + ex);
                    }
                },
                error: function (ex) {
                    alert(ex);
                }
            });
        }
        /*code_end*/
    </script>
</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 480px; border: 1px solid gray;"></div>
    </div>
    <br />
    <div class="container">
        <div class="row">
            <div class="group">
                <label>RowStart:</label>
                <input type="text" id="rowStart">
            </div>
            <div class="group">
                <label>RowEnd:</label>
                <input type="text" id="rowEnd">
            </div>
        </div>

        <div class="row">
            <div class="group">
                <label>ColumnStart:</label>
                <input type="text" id="columnStart">
            </div>
            <div class="group">
                <label>ColumnEnd:</label>
                <input type="text" id="columnEnd">
            </div>
        </div>

        <div class="row">
            <div class="group">
                <label>RepeatRowStart:</label>
                <input type="text" id="repeatRowStart">
            </div>
            <div class="group">
                <label>RepeatRowEnd:</label>
                <input type="text" id="repeatRowEnd">
            </div>
        </div>

        <div class="row">
            <div class="group">
                <label>RepeatColumnStart:</label>
                <input type="text" id="repeatColumnStart">
            </div>
            <div class="group">
                <label>RepeatColumnEnd:</label>
                <input type="text" id="repeatColumnEnd">
            </div>
        </div>

        <div class="row">
            <div class="group">
                <label>
                    <input type="checkbox" id="showBorder">
                    ShowBorder
                </label>
            </div>
            <div class="group">
                <label>
                    <input type="checkbox" id="showGridLine">
                    ShowGridLine
                </label>
            </div>
        </div>

        <div class="row">
            <div class="group">
                <label>ShowRowHeader:</label>
                <select id="showRowHeader">
                    <option value="0">Inherit</option>
                    <option value="1">Hide</option>
                    <option value="2">Show</option>
                    <option value="3">ShowOnce</option>
                </select>
            </div>
            <div class="group">
                <label>ShowColumnHeader:</label>
                <select id="showColumnHeader">
                    <option value="0">Inherit</option>
                    <option value="1">Hide</option>
                    <option value="2">Show</option>
                    <option value="3">ShowOnce</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="group">
                <label>HeaderLeft:</label>
                <input type="text" id="headerLeft">
            </div>
            <div class="group">
                <label>HeaderLeftImage:</label>
                <select id="headerLeftImage">
                    <option value="images/apple.jpg">Apple</option>
                    <option value="images/olympic.jpg" selected>Olympic</option>
                </select>
            </div>
        </div>

        <div class="row">
            <div class="group">
                <label>HeaderCenter:</label>
                <input type="text" id="headerCenter">
            </div>
            <div class="group">
                <label>HeaderCenterImage:</label>
                <select id="headerCenterImage">
                    <option value="images/apple.jpg">Apple</option>
                    <option value="images/olympic.jpg" selected>Olympic</option>
                </select>
            </div>
        </div>

        <div class="row">
            <div class="group">
                <label>HeaderRight:</label>
                <input type="text" id="headerRight">
            </div>
            <div class="group">
                <label>HeaderRightImage:</label>
                <select id="headerRightImage">
                    <option value="images/apple.jpg">Apple</option>
                    <option value="images/olympic.jpg" selected>Olympic</option>
                </select>
            </div>
        </div>

        <div class="row">
            <div class="group">
                <label>FooterLeft:</label>
                <input type="text" id="footerLeft">
            </div>
            <div class="group">
                <label>FooterLeftImage:</label>
                <select id="footerLeftImage">
                    <option value="images/apple.jpg">Apple</option>
                    <option value="images/olympic.jpg" selected>Olympic</option>
                </select>
            </div>
        </div>

        <div class="row">
            <div class="group">
                <label>FooterCenter:</label>
                <input type="text" id="footerCenter">
            </div>
            <div class="group">
                <label>FooterCenterImage:</label>
                <select id="footerCenterImage">
                    <option value="images/apple.jpg">Apple</option>
                    <option value="images/olympic.jpg" selected>Olympic</option>
                </select>
            </div>
        </div>

        <div class="row">
            <div class="group">
                <label>FooterRight:</label>
                <input type="text" id="footerRight">
            </div>
            <div class="group">
                <label>FooterRightImage:</label>
                <select id="footerRightImage">
                    <option value="images/apple.jpg">Apple</option>
                    <option value="images/olympic.jpg" selected>Olympic</option>
                </select>
            </div>
        </div>

        <div class="row">
            <div class="group">
                <label></label>
                <input type="button" id="btnSetPrintInfo" value="Set PrintInfo">
            </div>
        </div>
    </div>

    <hr style="border: 1px solid white;border-bottom-color: lightgray;" />

    <input type="button" value="Print" id="btnPrint">
</body>
</html>
